<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="domId" label="序号" width="100" />
        <el-table-column prop="domCode" label="编号" width="120" />
        <el-table-column prop="domTopic" label="主题" width="120" />
        <el-table-column prop="domIsDel" label="默认DOM" width="120" >
            <template #default="scope">
                <el-tag v-if="scope.row.domIsDel" type="success">是</el-tag>
                <el-tag v-else type="danger">否</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="domVersion" label="版本" width="120" />
        <el-table-column label="成品类型" width="120">
            <template #default="scope">
                {{ getProductTypeLabel(scope.row.domType) }}
            </template>
        </el-table-column>
        <el-table-column prop="domName" label="成品名称" width="120" />
        <el-table-column prop="yieId" label="日产量" width="120" />
        <el-table-column prop="remark" label="备注" width="120" />
        <el-table-column fixed="right" label="操作列" min-width="180">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="showDetailDialog(scope.row)">
                    查看详情
                </el-button>
                <el-button link type="primary" size="small" @click="openDeleteDialog(scope.row.domId)">
                    删除
                </el-button>
                <el-button link type="primary" size="small"
                    @click="handleModify(scope.row.domId)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>
    
    <!-- Add this pagination component -->
    <div class="pagination-container">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
    
    <!-- 删除确认对话框 -->
    <el-dialog v-model="isDeleteDialogVisible" title="确认删除" @close="closeDeleteDialog">
        <p>确定要删除该记录吗？</p>
        <template #footer>
            <el-button @click="closeDeleteDialog">取消</el-button>
            <el-button type="primary" @click="confirmDelete">确定</el-button>
        </template>
    </el-dialog>

    <!-- 查看详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="DOM详情" width="600px">
        <el-descriptions :column="2" border>
            <el-descriptions-item label="序号">{{ detailData.domId }}</el-descriptions-item>
            <el-descriptions-item label="编号">{{ detailData.domCode }}</el-descriptions-item>
            <el-descriptions-item label="主题">{{ detailData.domTopic }}</el-descriptions-item>
            <el-descriptions-item label="默认DOM">{{ detailData.domIsDel ? '是' : '否' }}</el-descriptions-item>
            <el-descriptions-item label="版本">{{ detailData.domVersion }}</el-descriptions-item>
            <el-descriptions-item label="成品类型">{{ getProductTypeLabel(detailData.domType) }}</el-descriptions-item>
            <el-descriptions-item label="成品名称">{{ detailData.domName }}</el-descriptions-item>
            <el-descriptions-item label="日产量">{{ detailData.yieId }}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">{{ detailData.remark }}</el-descriptions-item>
        </el-descriptions>
        <template #footer>
            <el-button type="primary" @click="detailDialogVisible = false">关闭</el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import {read,write} from '@/axios/axiosHelper'

const router = useRouter()
const dialogFormVisible = ref(false)
const detailDialogVisible = ref(false)
const isDeleteDialogVisible = ref(false)
const currentDeleteId = ref(null)

// 详情数据
const detailData = reactive({
    domId: 0,
    domCode: '',
    isSystemCode: false,
    domIsDel: false,
    domTopic: '',
    domType: '',
    domVersion: '',
    domName: '',
    yieId: 0,
    remark: ''
});

// 显示详情对话框
const showDetailDialog = (row: any) => {
    Object.assign(detailData, row);
    detailDialogVisible.value = true;
};

// Add the handleModify function
const handleModify = (domId: number) => {
    localStorage.setItem('domId', domId.toString());
    router.push({
        path: '/UpdateDOM',
        query: { domId: domId }
    }) 
}

// 显示相关代码-----------------------------------------------------------------------
const tableData = ref([{
    domId: 0,
    domCode: "",
    domTopic: "",
    domIsDel: true,
    domVersion: "",
    domType: "",
    domName: "",
    yieId: 0,
    remark: ""
}])

// Add these with your other refs
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

onMounted(() => {
    getdom();
})

const getdom = () => {
    read.get(`/f-read/api/DOM/Handle`,{
        params: {
            pageIndex: currentPage.value,
            pageSize: pageSize.value
        }
    }).then((res) => {
        console.log(res.data);
        tableData.value = res.data.data;
        total.value = res.data.totalCount; // Assuming the API returns total count
    });
}

const openDeleteDialog = (domId) => {
    currentDeleteId.value = domId;
    isDeleteDialogVisible.value = true;
}

const closeDeleteDialog = () => {
    isDeleteDialogVisible.value = false;
    currentDeleteId.value = null;
}

const confirmDelete = () => {
    write.post(`/f-write/api/DOM/DeleteDOM`, {
        domId: currentDeleteId.value
    })
      .then(() => {
            ElMessage.success('删除成功');
            // 从表格数据中移除已删除的记录
            tableData.value = tableData.value.filter(item => item.domId!== currentDeleteId.value);
            closeDeleteDialog();
        })
      .catch((error) => {
            ElMessage.error('删除失败: ' + (error.response?.data?.error || error.message));
            closeDeleteDialog();
        });
}

const getProductTypeLabel = (type: string) => {
    switch (type) {
        case 'electronic':
            return '电子产品';
        case 'mechanical':
            return '机械零件';
        case 'chemical':
            return '化工产品';
        default:
            return type;
    }
}

// Add these new functions
const handleSizeChange = (val: number) => {
    pageSize.value = val;
    getdom();
};

const handleCurrentChange = (val: number) => {
    currentPage.value = val;
    getdom();
};
</script>

<style scoped>
/* 可以添加一些自定义样式 */
.dialog-footer {
    display: flex;
    justify-content: flex-end;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
</style>